:root {
    /* ----------------------------- Colours Declaration----------------------------------------------------- */
    --bg-color: #fefefe;
    --primary-color: #232323;
    --span-font-color: #0be26c;
    --special-bg-color: #03045e;
    --sky-blue: #00b4d8;
    --pure-white: #fff;
    --pure-black: #000;
    --yellow-color: #ffff3f;
    --gray-1: #343a40;
    --gray-2: #495057;
    --gray-3: #6c757d;
    --gray-4: #adb5bd;
    --gray-5: #ced4da;
    --gray-6: #dee2e6;
    --gray-7: #e5e5e5;
    --gray-8: #e9ecef;
    --gray-8a: #e9ecef56;
    --gray-9: #f8f9fa;
    /* ----------------------------- Fonts Declaration----------------------------------------------------- */
    --primary-font-sourse-sans-3: "Source Sans 3", sans-serif;
    --primary-font-extra-outfit: "Outfit", sans-serif;
    --paragraph-font-nunito: "Nunito", sans-serif;
  }

@media (max-width : 1200px){
  .top-bottom-nav11-container{
    display: block;
  }
  .hamburger{
    display: inline-block;
    
  }
  
    /* header{
        overflow-y: scroll;
    } */
    .bottom-nav , .top-nav{
        display: none;
    }
    .top-bottom-nav11-hide{
      display: none;
    }
  .top-bottom-nav11-container{
    width: 100%;
  }
    .top-bottom-nav11{
        display: flex;
        flex-direction: column;
        z-index: 100;
        position: fixed;
        top: 0px;
        right: 0;
        width: 100vw;
        height: 100vh;
        overflow-y: auto;
    }
   
    .top-nav-list li{
        margin: 0;
    }
    .top-nav-list1{
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
        width: 100%;
        background-color: var(--bg-color);
        padding: 75px 0 25px 0;
    }
    .top-nav-list-item11{
        display: flex;
        justify-content: center;
        padding: 5px 13px;
    }
    .bottom-nav1{
        display: flex;
        flex-direction: column;
    }
    .bottom-nav-list1 {
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        align-items: center;
        min-height: 80vh;
        justify-content: flex-start;
    }
    .dropdown {
        /* background-color: var(--special-bg-color); */
        position: static;
        display: block;
        justify-content: center;
        align-items: center;
        padding: 10px 13px;
        /* overflow-y: scroll; */
      }
      .dropdown:hover > i {
        transform: none;
      }
    .dropdown-menu {
        position: static;
        display: block;
        min-width: auto;
        /* height: 100px; */
        /* overflow-y: scroll; */
      }
      /* .dropdown:hover > .dropdown-menu > li {
        display: none;
      }
      .dropdown1:hover > .dropdown-menu > li {
        display: block;
      } */
      .dropdown-menu > li{
        display: none;
      }
      .dropdown-menu-1 > li{
        display: none;
      }
      .dropdown-menu-show li{
        display: block;
      }
      .dropdown:hover > .dropdown-menu > li {
        display: none;
      }
      .dropdown:hover > .dropdown-menu-show > li {
        display: block;
      }

    .header-logo-top-nav {
        justify-content: space-between;
        z-index: 10000000000000000000000;
    }
    .header-logo{
      width: 60%;
    }
    .header-logo img{
      width: 100%;
      margin-left: 30px;
    }
    .hamburger{
      position: absolute;
      top: 20px;
      right: 10px;
    }
    .main-logo img {
      width: 100%;
      margin-top: 30px;
    }

    .home-page-btn{
      bottom: 100px;
    }
    .counselling-code-container{
      bottom: 180px;
    }
    .counselling-code-container-logo i{
      font-size: 1.5rem;
      color: var(--bg-color);
      padding-right: 10px;
    }
    .counselling-code-container-text h3{
     font-family: var(--paragraph-font-nunito);
     color: var(--gray-5);
     font-size: .8rem;
    }
    .counselling-code-container-text h3 span{
      font-family: var(--primary-font-sourse-sans-3);
      font-size: .9rem;
      color: var(--bg-color);
    }

    .first-page-text-container h1{
        font-size: 1.4rem;
        letter-spacing: 1px;
    }
    .first-page-text-container p{
        font-size: .75em;
        padding-top: 10px;
    }
    .first-page-text-container a{
        font-size: .9em;
    }
    .home-page-btn a.home-page-btn-a{
        font-size: .9em;
    }
    .mouse-scroll span {
        width: 12px;
        height: 12px;
    }
    .programs-offered-heading h1{
        font-size: 1.9rem;
    }
    .branch-images-container{
        grid-template-columns: 250px 250px;
        grid-row-gap: 75px;
    }
    .branch-images-container a img {
        height: 150px;
        width: 250px;
    }
    .branch-images-container .card-front a figcaption{
        padding: 10px 0 15px 0;
    }
    .swiper {
        width: 98%;
        height: 320px;
    }
    .show-button-toggle {
        right: 50%;
      }
      .show-button-toggle i#bell{
        transform: rotate(360deg);
      }
    .news-box {
        width: 340px;
        height: 400px;
    }
    .show-button {
        top: 20%;
    }
    .our-history-container {
        padding: 30px 40px;
    }
    .our-history-heading h1{
        font-size: 1.8rem;
    }
    .our-history-content {
        padding: 0 10px;
    }
    .our-history-content p {
        font-size: .9rem;
    }
    .our-history-content p span{
        font-size: 1.05rem;
        font-weight: 650;
    }
    .our-vision-container{
        padding: 30px 40px;
    }
    .our-vision-heading h1{
        font-size: 1.5rem;
    }
    .our-vision-container .our-vision-content {
        padding: 0 10px;
      }
    .our-vision-container
  .our-vision-content
  ul.our-vision-content-list
  li.our-vision-content-list-item{
    font-size: .9rem;
    line-height: 25px;
    padding-bottom: 10px;
  }
  .our-vision-container
  .our-vision-content
  ul.our-vision-content-list
  li.our-vision-content-list-item
  span{
    font-size: 1.05rem;
    font-weight: 600;
  }
  .menu {
    --s: 25px; /* control the size */
    
    height: var(--s);
    aspect-ratio: 1;
    border: none;
    padding: 0;
    border-inline: calc(var(--s)/2) solid #0000; 
    box-sizing: content-box;
    --_g1: linear-gradient(var(--special-bg-color) 20%,#0000 0 80%,var(--special-bg-color) 0) 
           no-repeat content-box border-box;
    --_g2: radial-gradient(circle closest-side at 50% 12.5%,var(--special-bg-color) 95%,#0000) 
           repeat-y content-box border-box;
    background: 
      var(--_g2) left  var(--_p,0px) top,
      var(--_g1) left  calc(var(--s)/10 + var(--_p,0px)) top,
      var(--_g2) right var(--_p,0px) top,
      var(--_g1) right calc(var(--s)/10 + var(--_p,0px)) top;
    background-size: 
      20% 80%,
      40% 100%;
    position: relative;
    clip-path: inset(0 25%);
    -webkit-mask: linear-gradient(90deg,#0000,#000 25% 75%,#0000);
    mask: linear-gradient(90deg,#0000,#000 25% 75%,#0000);
    cursor: pointer;
    transition: 
      background-position .3s var(--_s,.3s), 
      clip-path 0s var(--_s,.6s);
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
  }
  .menu:before,
  .menu:after {
    content:"";
    position: absolute;
    border-radius: var(--s);
    inset: 40% 0;
    background: var(--special-bg-color);
    transition: transform .3s calc(.3s - var(--_s,.3s));
  }
  
  .menu:checked {
    clip-path: inset(0);
    --_p: calc(-1*var(--s));
    --_s: 0s;
  }
  .menu:checked:before {
    transform: rotate(45deg);
  }
  .menu:checked:after {
    transform: rotate(-45deg);
  }
  .menu:focus-visible {
    clip-path: none;
    -webkit-mask: none;
    mask: none;
    border: none;
    outline: 2px solid var(--special-bg-color);
    outline-offset: 5px;
  }
}
@media (max-width : 480px){
  .branch-images-container{
    grid-template-columns: 250px ;
    grid-row-gap: 75px;
}
}